<template>
  <div ref="chartDom" style="width: 600px; height: 400px"></div>
  <div class="chart-container">
    <EChartsWrapper :option="chartOption" />
  </div>

</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import EChartsWrapper from '../components/EChartsWrapper.vue'
import * as echarts from 'echarts'

const chartDom = ref(null)
let myChart = null

const chartOption = {
  title: { text: '动态更新示例' },
  tooltip: { trigger: 'axis' },
  xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
  yAxis: { type: 'value' },
  series: [{
    name: 'A销量',
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'line',
    smooth: false
  },
  {
    name: 'B销量',
    data: [12, 20, 15, 8, 30, 11, 13],
    type: 'line',
    smooth: false
  }]
}

// 初始化图表
const initChart = () => {
  myChart = echarts.init(chartDom.value)
  // 配置项对象
  const option = {
    title: { text: '示例图表' },
    tooltip: {},
    xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }]
  }
  //使用配置
  myChart.setOption(option)
}

// 生命周期钩子
onMounted(() => {
  //挂载后才能操作DOM
  initChart()
})

onUnmounted(() => {
  if (myChart) {
    myChart.dispose() // 销毁实例
  }
})
</script>

<style>
.chart-container {
  width: 100%;
  height: 50vh;
  padding: 20px;
  box-sizing: border-box;
}
</style>
